<template>
  <ModalNewPolygon>
    <div class="flex content_box">
      <div class="flex2 positionR flexC JustifyContentC AlignItemsC"
           style="margin-top: -4%">
        <img src="@/assets/img/fxyp/by_icon.png"
             alt=""
             style="width: 7.125rem;height: 98%;position: absolute;right: 1rem;top: 0" />
        <div class="select_box JustifyContentC AlignItemsC">
         <!-- <BaseSelect
                  v-on:select="showProject"
                  :selectedValue=value
                  :dataList=gmNameList
                  :widthData="widthData">
          </BaseSelect>-->
          <el-select v-model="value"
                     placeholder="公墓名称"
                     @change="currentSel">
            <el-option v-for="item in gmNameList"
                       :key="item.orgId"
                       :label="item.orgName"
                       :value="item.orgId">
            </el-option>
          </el-select>
        </div>
        <ul class="title_ul">
          <li v-for="(item, index) in titleList "
              :key=index
              class="font_s22 default_bg"
              @click="select_tab(index)"
              :class="{cur:isActive===index}">
            {{item}}
          </li>
        </ul>
      </div>
      <fxyp-left :nameTx=selVal
                 :TypeIndex=isActive
                 :list=rankingList
                 :Ylist=zdmjList
                 :YList2=pfmjList
                 :YList3=yymjList
                 :YList4=sckzmmjList
                  :OrgNameIndex=OrgNameIndex />
      <fxyp-right />
    </div>
  </ModalNewPolygon>
</template>

<script>
import ModalNewPolygon from "../../../components/ModalNewPolygon";
import FxypLeft from "./FxypLeft";
import FxypRight from "./FxypRight";
import Bus from '../../../assets/bus.js'
import { queryOrderOrgList } from '@/api/dataSea'
import BaseSelect from "../BaseSelect";
export default {
  name: "AnalysisAndJudgement",
  components: {  FxypRight, FxypLeft, ModalNewPolygon },
  data () {
    return {
      widthData: '',
      titleList: [
        '土地信息', '墓穴信息', '人员信息'
      ],
      isActive: 0,
      value: '公墓名称',
      selVal: '',
      orderType: 1,
      gmNameList: [],
      rankingList: [],
      flag: true, // 默认0
      OrgNameIndex: -1,
      zdmjList: [],
      pfmjList: [],
      yymjList: [],
      sckzmmjList: []
    }
  },
  mounted () {
    this.queryOrderOrgList(this.orderType)
  },
  methods: {
    showProject() {},
    select_tab (index) {
      this.isActive = index
      Bus.$emit('tabIndex', index)
      this.queryOrderOrgList(index + 1)
    },
    currentSel (val) {
      this.gmNameList.forEach((item) => { // 遍历list的数据
        if (item.orgId === val) {
          this.selVal = item.orgName
          Bus.$emit('gm_name', item)
          localStorage.setItem('name', JSON.stringify(item))
        }
      })
    },
    queryOrderOrgList (orderType) {
      // 1-土地信息 2-墓穴信息 3-人员信息
      this.zdmjList = []
      this.pfmjList = []
      this.yymjList = []
      this.sckzmmjList = []
      queryOrderOrgList({
        orderType: orderType
      }).then((result) => {
        if (result.data.status == 1) {
          if (this.flag) {
            this.gmNameList = result.data.response
            this.flag = false
          }
          this.rankingList = result.data.response
           if (result.data.response) {
             this.rankingList.forEach((item, index) => {
               if (this.selVal === item.orgName) {
                 this.OrgNameIndex = index + 1
                 Bus.$emit('classId', index)
               }
             })
           }
        }
      }).catch((err) => {

      });
    }
  }
}
</script>

<style lang="scss">
.content_box {
  .el-input {
    width: 80%;
    margin: 0 auto;
  }
  .el-input__inner {
    background: transparent !important;
    border: none !important;
    font-size: 1rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #cef9fc;
    height: 4rem;
  }
}
</style>
<style>
  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
    background-color: transparent;
  }
  .el-select-dropdown__item {
    color: white;
  }
  .el-select-dropdown {
    background: rgba(0,0,0, .9);
    border: none;
  }
</style>
<style scoped lang="scss">
.content_box {
  width: 100%;
  height: 100%;
  .select_box {
    width: 12.625rem;
    height: 4rem;
    background: url("../../../assets/img/fxyp/select_name_bg.png");
    background-size: 100% 100%;
    margin-right: 1rem;
  }
  .title_ul {
    margin-top: 16%;
    margin-right: 1rem;
    z-index: 1;
  }
  .title_ul li {
    margin-bottom: 2rem;
    width: 11.375rem;
    height: 5.5625rem;
    line-height: 5.5625rem;
    text-align: center;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
  .default_bg {
    background: url("../../../assets/img/fxyp/title_bg.png");
    background-size: 100% 100%;
    color: #cef9fc;
  }
  .cur {
    background: url("../../../assets/img/fxyp/title_cur_bg.png");
    background-size: 100% 100%;
    color: #f9dd6a;
  }
}
</style>